<template>
    <div class="IndexEdit">
    <el-row>
      <el-col :span="4">
        <h4  :class="number ==  0 ? 'leftitem active' : 'leftitem' "  @click="toCardChange">主页概览配置</h4>
        <h4  :class="number ==  1 ? 'leftitem active' : 'leftitem' " @click="toMapSet" style="border-top:none;">地图修改</h4>
        <!-- <h4  :class="number ==  2 ? 'leftitem active' : 'leftitem' " @click="toLogoPhone">LOGO/服务电话</h4> -->


      </el-col>
      <el-col :span="20">
        <CardChange v-if="number == 0"></CardChange>
        <MapSet v-if="number == 1"></MapSet>
        <LogoPhone  v-if="number == 2"> </LogoPhone>

      </el-col>
      <el-col :span="4"></el-col>
    </el-row>
    
  </div>
</template>

<script>
import CardChange from "../set/CardChange.vue"
import MapSet from "../set/MapSet.vue"
import LogoPhone from "../set/LogoPhone.vue"


export default {
  components: {
    CardChange,
    MapSet,
    LogoPhone,
  },
    data () {
        return{
          number: 0,
        }
    },
    methods: {
        toMapSet(){
          this.number = 1
        },
        toCardChange(){
          this.number = 0
        },
         toLogoPhone(){
          this.number = 2
        }
    }
}
</script>

<style scoped>
    .IndexEdit .leftitem{
        width: 90%;
        line-height:70px;
        font-weight:normal;
        cursor:pointer;
        list-style: none;
        text-align: center;
        font-size: 16px;
        border: 1px solid rgba(89, 129, 165, 0.6);
        transition: all .4s;

    }
    .leftitem:last-child{
      border-top:none ;
    }
    .IndexEdit .leftitem.active{
      background: rgba(89, 129, 165, 0.6);
    }
  .IndexEdit .mapshow{
        /* background-color:#eee; */
        border: 1px dashed #afafaf;
        margin-top: 80px;;
    }
    

</style>